<script setup>
    import { ElMessage } from "element-plus"
    import {reactive, ref} from "vue"
    import {loginAPI} from "@/api/user"
    import {useRouter} from "vue-router"

    // 登陆表单
    const dataForm = reactive({
        userName: "",
        password: ""
    })
    // 校验规则
    // -- 先做简单检验
    const rules = {
        "userName": [
            {required: true, message: "用户名不能为空！", trigger: "blur"}
        ],
        "password": [
            {required: true, message: "密码不能为空！", trigger: "blur"}
        ]
    }
    // 获取表单元素
    const formRef = ref(null)
    // 创建router实例 - 必须在外部进行创建
    const router = useRouter()
    // 登录
    const onConfirm = () => {
        // 整体校验
        formRef.value.validate(async (result) => {
            if(!result) {
                return ElMessage.error("用户名或密码不能为空！")
            } else {
                // 向后端发送请求
                const loginStatus = await loginAPI(dataForm)
                // 判断是否登陆成功
                if(loginStatus === true) {
                    // 提示
                    ElMessage.success("登陆成功！")
                    // 通过后跳转页面
                    router.push("/booklist")
                    
                } else {
                    // 提示
                    return ElMessage.error("用户名或密码错误！")
                }

            }
        })
    }
    // 重置
    const onCancel = () => {
        formRef.value.resetFields()
    }



</script>

<template>
    <div class="container-login">
        <div class="container-pic">
            <img src="@/assets/computer.png" width="350px">
        </div>
        <el-card
        shadow="never">
            <template #header>
                <h4>登录</h4>
            </template>
            <template #default>
                <el-form
                label-width="55px"
                :model="dataForm"
                :rules="rules"
                ref="formRef"
                >
                    <el-form-item label="账号:" prop="userName">
                        <el-input type="text" 
                        placeholder="请输入用户名"
                        v-model="dataForm.userName"
                        clearable></el-input>
                    </el-form-item>
                    <el-form-item label="密码:" prop="password">
                        <el-input type="password" 
                        placeholder="请输入密码"
                        v-model="dataForm.password"
                        clearable
                        show-password
                        @keydown.enter="onConfirm"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onConfirm">确 认</el-button>
                        <el-button @click="onCancel">重 置</el-button>
                    </el-form-item>
                </el-form>
            </template>
        </el-card>
    </div>
</template>

<style scoped lang="scss">
    html,body{
        background-color: #f1f5f9;
    }
    .container-login{
        height: 80vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .el-card {
        width: 480px;
        :deep(.el-card__header) {
            h4 {
                margin: 0;
                text-align: center;
            }
        }
        :deep(.el-card__body) {
            .el-form-item:nth-child(1) {
                margin-top: 20px;
            }
            .el-form-item:nth-child(2) {
                margin: 40px 0;
            }
            .el-input {
                height: 36px;
            }
        }
    }
</style>
